<template>
  <div class="maphotMavpWrap">
    <div class="containerWrap" ref="mapScreenfull">
      <div class="infoButton">
        <i @click='screenfullMap' class="iconfont icon-quanping2"></i>
      </div>
      <div class="colorWrap">
        <div v-for="(item,index) in companyColor" :key="index" style="color: #3975FE;width:85px;overflow: hidden;">
          <span class="colorlist" :style="'background-color:'+item.color"></span><span>{{item.value}}</span><br/>
        </div>
      </div>
      <div  class="sliderWrap">
        <div class="moveWrap">
          <el-tooltip :visible-arrow="false" class="item" effect="dark" content="播放" placement="top-start">
            <i @click='mapAction(true)' v-show="!isrun" class="iconfont icon-bofang2"></i>
          </el-tooltip>
          <el-tooltip :visible-arrow="false"  class="item" effect="dark" content="暂停" placement="top-start">
            <i @click='mapAction(false)' v-show="isrun" class="iconfont icon-zanting"></i>
          </el-tooltip>
        </div>
        <div class="sliderinner" >
          <el-slider
            :format-tooltip="getFormat"
            @change="change"
            v-model="mapIndex"
            :step="1"
            :min="0"
            :max="this.hours.length==0 ? 1 : this.hours.length-1"
            show-stops>
          </el-slider>
          <div class="timeText">
            <span v-for="(item, index) in hours" :key="index" :style="returnSty(index)">{{item}}:00</span>
          </div>
        </div>
      </div>
      <div id="mapContainer"></div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ["parentId","areaInfo","hours","mapInfolist","streetData","searchInfo"],
    data () {
      return {
        map: "",
        searchInfoWindow: "",
        mapInfoWindow: "",
        markers: [],
        companyColor: [
          {color:"red",     value:">1000"},
          {color:"yellow",  value:"500-1000"},
          {color:"green",   value:"100-500"},
          {color:"blue",    value:"<100"}
        ],
        mapClickMarker: "",
        ply: [],
        mapIndex: 0,
        isrun:false,
        Plg:"",
        indervalTimer:""
      }

    },
    mounted(){
      this.getHotMap()
    },
    created(){

    },
    destroyed(){
    },
    methods: {
      mapvSet(data){
        let _this=this
        let dataSet = new mapv.DataSet(data);
        let options = {
          size: 10,
          gradient: { 0.25: "rgb(0,0,255)", 0.55: "rgb(0,255,0)", 0.85: "yellow", 1.0: "rgb(255,0,0)"},
          max: 100,
          draw: 'heatmap'
        }
        this.map.clearOverlays();
        this.mapvLayer = new mapv.baiduMapLayer(this.map, dataSet, options);
      },
      mapAction(key){
        if(key){
          this.isrun=true
          this.indervalTimer=setInterval(()=>{
            if(this.mapInfolist[this.mapIndex]){
              this.mapvSet(this.mapInfolist[this.mapIndex])

              if(this.mapIndex>=this.hours.length-1){
                this.mapIndex=0
              }else{
                this.mapIndex++
              }
            }
          }, 2000)
        }else {
          this.isrun=false
          clearInterval(this.indervalTimer)
        }
      },
      //画区域
      showArea(areaPoints) {
        let _this = this, arr = []
        if (areaPoints && areaPoints.length > 2) {
          // _this.map.clearOverlays();        //清除地图覆盖物
          areaPoints.forEach((item) => {
            arr.push(new BMap.Point(item.lng, item.lat))
          })
          // Polyline  Polygon
          _this.Plg = new BMap.Polyline(arr, {
            strokeColor: "#3975FE",    //边线颜色。
            fillColor: "white",      //填充颜色。当参数为空时，圆形将没有填充效果。
            strokeWeight: 1,       //边线的宽度，以像素为单位。
            strokeOpacity: 1,    //边线透明度，取值范围0 - 1。
            fillOpacity: 1,      //填充的透明度，取值范围0 - 1。
            strokeStyle: 'solid' //边线的样式，solid或dashed。
          });  //创建多边形

          _this.map.addOverlay(_this.Plg);  //添加覆盖物
          _this.Plg.disableMassClear()
          // _this.map.setViewport(_this.ply.getPath());    //调整视野
        }
      },
      //百度提取区域经纬度
      showAreaCenter(areaPoints) {
        let _this = this, arr = []
        if (areaPoints && areaPoints.length > 2) {
          _this.map.clearOverlays();        //清除地图覆盖物
          areaPoints.forEach((item) => {
            arr.push(new BMap.Point(item.lng, item.lat))
          })
          // Polyline  Polygon
          _this.ply = new BMap.Polyline(arr, {
            strokeColor: "#3975FE",    //边线颜色。
            fillColor: "white",      //填充颜色。当参数为空时，圆形将没有填充效果。
            strokeWeight: 1,       //边线的宽度，以像素为单位。
            strokeOpacity: 1,    //边线透明度，取值范围0 - 1。
            fillOpacity: 1,      //填充的透明度，取值范围0 - 1。
            strokeStyle: 'solid' //边线的样式，solid或dashed。
          });  //创建多边形

          _this.map.addOverlay(_this.ply);  //添加覆盖物
          _this.map.setViewport(_this.ply.getPath());    //调整视野
          // _this.map.setZoom(13)
        }else {
          this.map.setCenter(new BMap.Point(114.14101345267,22.6485544122),11)
          _this.map.setZoom(11)
        }
      },
      showAreaPoints(regionPoints){
        this.clearAll()
        this.showAreaCenter(regionPoints)
        let content1,content2
        if(this.mapInfolist.length>0){
          this.mapvSet(this.mapInfolist[this.mapIndex])
        }else {
          this.mapIndex=0
          this.isrun=false
          clearInterval(this.indervalTimer)
        }

        if(this.parentId){
          this.streetData.forEach(item=>{
            this.showArea(JSON.parse(item.regionPoints))
          })
        }else {
          this.$store.state.districtData.forEach(item=>{
            this.showArea(JSON.parse(item.regionPoints))
          })
        }
      },
      getHotMap(){
        let _this = this
        _this.map = new BMap.Map("mapContainer", {
          enableMapClick: false,
          minZoom: 10,
          maxZoom: 19
        });// 创建地图实例

        _this.map.setMapStyle({
          styleJson: [
            {
              "featureType": "poilabel",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "manmade",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            },
            {
              "featureType": "building",
              "elementType": "all",
              "stylers": {
                "visibility": "off"
              }
            }
          ]
        });

        _this.map.centerAndZoom(new BMap.Point(114.14101345267,22.6485544122), 11);// 初始化地图，设置中心点坐标和地图级别
        _this.map.enableScrollWheelZoom(); // 允许滚轮缩放
        _this.map.addControl(new BMap.OverviewMapControl());
        _this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
        _this.map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));
      },

      clearAll(){
        let allOverlay = this.map.getOverlays();
        if(allOverlay){
          for (var i = 0; i < allOverlay.length; i++) {
            if(allOverlay[i].enableMassClear){
              allOverlay[i].enableMassClear();
            }
          }
        }

        this.map.clearOverlays();
      },
      //拖动
      change(val){
        this.mapAction(false)
        if(this.mapInfolist.length>0){
          this.mapvSet(this.mapInfolist[this.mapIndex])
        }
      },
      getFormat(val){
        return val<10 ? '0' + val + ':00' : val + ':00'
      },
      returnSty(index){
        return "position: absolute; margin-left: -16px; left:"+index*100/(this.hours.length-1)+"%"
      },
      screenfullMap(){
        if (this.screenfull.enabled) {
          this.screenfull.toggle(this.$refs.mapScreenfull);
        }
      },
    },
    watch: {
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .maphotMavpWrap
    width: 100%;
    height 100%
    &:hover .infoButton
      opacity: 1 !important;
    .containerWrap
      height: 100%;
      width: 100%;
      margin 0px auto;
      position: relative;
      .sliderWrap
        font-size: 16px;
        color: #6A6FFC;
        position: absolute;
        bottom: 0px;
        left: 0px;
        width 100%
        height 48px
        vertical-align middle
        background-color rgba(255, 255, 255, 0.8)
        text-align center
        z-index 5
        .sliderinner
          width: 89%;padding-left: 20px;display: inline-block;
          .timeText
            position: relative;margin-top: -8px;font-size: 12px;
        .moveWrap
          display: inline-block;vertical-align: middle;
          margin-right 10px;
        .iconfont
          font-size 28px
          color #3975FE
          cursor pointer
          &:hover
            color #809fe6
      .infoButton
        height 31px
        font-size: 16px;
        color: #6A6FFC;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index 5
        opacity: 0;
        .iconfont
          display: inline-block;
          font-size: 18px;
          cursor pointer
      .colorWrap
        background-color white
        opacity 0.8
        position: absolute;
        line-height 25px
        left 0;
        top: 0;
        padding 10px
        border-radius 5px
        z-index: 5;
        color: black;
        margin-left: 10px;
        margin-top 10px;
        .colorlist
          display: inline-block;
          width: 10px;
          height 10px;
          border-radius: 50%;
          background-color: red;
          margin-right: 5px;
        .countStyle
          color: #3975FE;
          float: right;
          min-width: 40px;
          text-align: right;
      #mapContainer
        height: 100%;
        width: 100%;
    .BMap_scaleCtrl
      bottom 50px !important
    .mapTopWrap
      background-color: white;
      overflow: hidden;
      min-height 90px;
      width 190px

      .mapBaseTitle
        color: #3975FE;
        font-size: 12px;
        writing-mode: vertical-lr;
        letter-spacing: 5px;
        float: left;
        padding: 11px;

    .BMapLib_SearchInfoWindow
      width 200px !important
      &::after
        content: ""
        position: absolute;
        background-color: white;
        width: 100px;
        height: 3px;
        bottom: 0px;
        left: 50px;
        z-index 100

    .BMapLib_bubble_title {
      padding-left: 14px !important;
      font-size: 14px !important;
      font-weight: bold !important;
      background-color white
      border-radius 10px !important
      /*display none !important*/
    }

    .BMapLib_bubble_top, .BMapLib_bubble_close {
      border-radius 10px !important
      border none !important
      background-color #f9f9f9 !important
    }

    #BMapLib_SearchInfoWindow0, .BMapLib_SearchInfoWindow {
      border-radius 10px !important
      /*min-width 200px !important*/
      box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.34) !important
      border none
    }

    .BMapLib_SearchInfoWindow .BMapLib_bubble_center {
      position static !important /*position absolute
      left 0
      top 31px*/
    }

    .BMapLib_bubble_content {
      min-height 100px !important
    }
</style>